<template>
  <el-container style="height: calc(100vh - 150px)">
    <el-aside class="aside">
      <el-card class="h-full" shadow="never">
        <el-menu
          background-color="#C29B74"
          text-color="#fff"
          unique-opened
        >
          <el-sub-menu index="0">
            <template #title>采集服务</template>
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
          </el-sub-menu>
          <el-sub-menu index="1">
            <template #title>采集服务2</template>
          </el-sub-menu>
        </el-menu>
      </el-card>
    </el-aside>
    <el-main class="main">
      <el-card class="h-full" shadow="never">
        <el-table :data="form.macData" class="mt-20" :header-cell-style="tableHeadStyle">
          <el-table-column :label="$t('pageStr.propertykeyStr')" align="center" prop="et"/>
          <el-table-column :label="$t('pageStr.propertyValueStr')" align="center" prop="fa"/>
        </el-table>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import {ref} from 'vue'

const form = ref({
  macData: [{}]
})
const tableHeadStyle = {
  'text-align': 'center',
  'background-color': '#F5EFE9',
  'max-width': '1000px'
}

const handleNodeClick = (data) => {
  console.log(data)
}

const defaultProps = {
  children: 'children',
  label: 'label',
}

const data = [
  {
    label: 'modbus[modbusclient]',
    children: [{
      label: '端口组',
      children: [{
        label: '通道1[com8]'
      }]
    }]
  }
]
</script>

<style scoped>
.aside {
  width: 300px !important;
  padding: 5px 0 0;
  margin-bottom: 10px;
  background-color: #F5F5F5;
}

.main {
  padding-top: 5px;
  padding-right: 0;
  padding-bottom: 10px;
}
</style>